<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <title>图书管理-首页</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"/>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style type="text/css">
        .table tbody tr td {
            vertical-align: middle;
        }

        table {
            margin-top: 10px;
        }

        div {
            padding-top: 10px;
        }
    </style>
</head>
<body>
<div class="container" id="app">
    <p>
        欢迎 :{{username}}
        <button type="button" @click="logout()" class="btn btn-danger  btn-xs pull-right" id="logout">退出登录</button>
    </p>
<!--    <div>-->
<!--        <form class="form-inline" id="myform">-->
<!--            <div class="form-group">-->
<!--                <label for="bookName">图书名称：</label> <input type="text" v-model="bookName"-->
<!--                                                           class="form-control" name="bookName" id="bookName"-->
<!--                                                           placeholder="请输入图书名称">-->
<!--            </div>-->
<!--            <div class="form-group">-->
<!--                <label for="author">作者：</label> <input type="text" v-model="author"-->
<!--                                                       class="form-control" id="author" name="author"-->
<!--                                                       placeholder="请输入作者姓名">-->
<!--                <button type="button" id="btnQuery" @click="findAll()" class="btn btn-primary">查询</button>-->
<!--            </div>-->
<!--        </form>-->

<!--    </div>-->
    <table class="table table-bordered">
        <thead>
        <tr>
            <th class="col-md-1 text-center">
                <a href="add_user.html"><span class="glyphicon glyphicon-plus"></span></a>
                序号
            </th>
            <th class="col-md-1 text-center">头像</th>
            <th class="col-md-1 text-center">用户名</th>
            <th class="col-md-1 text-center">生日</th>
            <th class="col-md-1 text-center">年龄</th>
            <th class="col-md-1 text-center">性别</th>
            <th class="col-md-1 text-center">操作</th>
        </tr>
        </thead>
        <tbody id="tbd">

        <tr class="text-center"  v-for="user in pageInfo">
            <td>{{user.id}}</td>
            <td><img :src="user.pic" class="img-rounded col-md-8"></td>
            <td class="text-left">{{user.username}}</td>
            <td>{{user.birthday}}</td>
            <td>{{user.age}}</td>
            <td>{{user.sex}}</td>
            <td>
                <button type="button" @click="deleteBy(user.id)" class="btn btn-danger">删除</button>
                <button type="button" @click="updateUser(user.id)" class="btn btn-primary">修改</button>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<script>
    let vueApp = new Vue({
        el: "#app",
        data() {
            return {
               // username : window.localStorage.getItem("username"),
                username : Cookies.get('username'),
                pageInfo : ""
            }
        },
        methods: {
            findAll(){
                axios.get("/fzq/user/list",{
                    params : {
                    },
                    headers :{
                            //"token" : window.localStorage.getItem("token")
                            "token" : Cookies.get('token')
                    }
                }).then(res=>{
                    if(res.data.status == 200){
                        this.pageInfo = res.data.data;
                    }else{
                        alert(res.data.msg);
                    }
                }).catch(e=>{
                    alert(e)
                })
            },
            updateUser(id){
                //window.localStorage.setItem("id",id);
                Cookies.set('id', id, { secure: true, sameSite: 'strict' });
                window.location.href="/fzq/html/update_user.html"
            },
            deleteBy(id){
                if(!confirm("确认删除么?")){
                    return;
                }
                axios.get("/fzq/user/delete",{
                    params : {
                        "id" : id
                    },
                    headers :{
                          //"token" : window.localStorage.getItem("token")
                            "token" : Cookies.get('token')
                    }
                }).then(res=>{
                    if(res.data.status == 200){
                        alert("删除成功");
                        location.reload ();
                    }else{
                        alert(res.data.msg);
                    }
                })
            },
            logout(){
                if(!confirm("确认退出么?")){
                    return;
                }
                axios.get("/fzq/logout",{
                    params : {},
                    headers :{
                            //"token" : window.localStorage.getItem("token")
                            "token" : Cookies.get('token')
                    },
                }).then(res=>{
                    if(res.data.status == 200){
                        alert("退出成功");
                        window.localStorage.clear();
                        window.location.href="fzq/login.html"
                    }else{
                        alert(res.data.msg);
                    }
                })
            }

        }, created() {
            this.findAll();
        }
    });
</script>
</body>
</html>